<template>
  <div id="login">
  <el-form id="form" ref="form" v-model="ruleForm"  label-width="80px">
        <h1>系统登录页面</h1>
    <el-form-item label="用户名:">
            <el-input class="input" placeholder="请输入账号" v-model="ruleForm.UserName" id="UserName"  ></el-input>
    </el-form-item>
    <el-form-item label="密码:">
            <el-input class="input" placeholder="请输入密码" v-model="ruleForm.UserPass" id="UserPass"  show-password></el-input>
    </el-form-item>
    <el-form-item>
    <el-button class="button" @click="Userlogin">登录</el-button>
    </el-form-item>

  </el-form>
  </div>
</template>

<script>
export default {
 data(){
   return{
     ruleForm:{
     UserName:"",
     UserPass:""
     }
     
   }
 },
 methods:{
   Userlogin(){
     let params={};
      let token={};
      params.username=this.ruleForm.UserName;
      params.userpass=this.ruleForm.UserPass;
      token.username=this.ruleForm.UserName;
      token.userpass=this.ruleForm.UserPass;
      window.sessionStorage.setItem("token",token)
      this.$http.post('/login',{params:params}).then(res=>{
        if(res.data.meta.status==200)
        {
          this.$router.push({
          path:'/',
          query:res.data.user,
        })
        }
        else{
          alert("您还没有注册")
          this.$router.push('/register')
        }
      })
   }
 }
}
</script>

<style lang="less" scoped>
#login{
  h1{
    text-align: center;
    margin-bottom: 30px;
  }
  width: 100%;
  height: 100%;
#form{
  height:50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  .input{
    width: 300px;
  }
  .button{
    margin: 0 auto;
  }
}
}

</style>
